<template>
  <div class="content">
    <div class="left">
      <div class="left-title">
        <h3>业务组织架构</h3>
      </div>
      <Tree :data="orgs" @on-select-change="onSelect" class="tree-render"></Tree>
    </div>

    <div class="right">
      <div class="right-title">
        <h2 style="text-align: left;">{{ title }}</h2>
        <div>
          <Button @click="onAdjust" type="info" class="btn">调整至其他组织</Button>
          <Button @click="onRecord" type="success" class="btn">人员调整记录</Button>
        </div>
      </div>

      <dt-grid ref="table" :page='pageData' :select="select" :onFetch='onFetch' />
    </div>

    <adjust-modal ref='adjust' @success='onSuccess' />
  </div>
</template>

<script>
  import adjustModal from './components/adjust-modal.vue'
  import Column from './opt/Column.js'
  import crimeOpt from '../opt/listOpt'
  import organApi from '@/biz/backStage/organizationManagement'

  export default {
    components: {
      adjustModal
    },
    data() {
      return {
        title: '',
        orgs: [],
        curOrg: {},
        selected: [],
        select: {
          one: (selection, row) => {
            this.selected = selection
          },
          all: (selection) => {
            this.selected = selection
          }
        },
        pageData: {
          current: 1,
        }
      }
    },
    mounted() {
      this.$refs.table.init(this, new Column())
      this.getBusinessList()
    },
    methods: {
      onFetch(data) {
        data.roleId = this.$dt.userInfo().role.roleId
        data.userId = this.$dt.userInfo().userId
        data.flag = true
        data.orgId = this.curOrg.orgId
        data.departmentId = this.curOrg.departmentId
        data.searchKey = true
        return organApi.getpeopleList(data)
      },
      onAdjust() {
        if (!this.selected.length) {
          this.$Message.warning('请选择需要调整的人员')
        } else {
          this.$refs.adjust.show({
            userIds: this.selected
          })
        }
      },
      onSuccess() {
        this.$refs.table.fetch()
      },
      onRecord() {
        this.$router.push({
          name: 'adjustRecord'
        })
      },
      // 获取业务组织架构
      getBusinessList() {
        crimeOpt.getBusinessList().then(res => {
          this.orgs = res
          // 默认选中第一条
          this.$set(this.orgs[0], 'selected', true)
          this.title = res[0].title
          this.curOrg = res[0]
          this.$refs.table.fetch()
        })
      },
      onSelect(event) {
        if (!event.length) {
          this.$Message.warning('请先选择一个组织或部门！')
        } else {
          this.title = event[0].title
          this.curOrg = event.length ? event[0] : {},
            this.pageData.current = 1
          this.$refs.table.fetch()
        }
      },
    },
  }
</script>

<style lang='scss' scoped>
  .content {
    padding: 20px;
    height: 100%;
    width: 100%;
    display: flex;

    .left {
      flex: 0 0 300px;
      padding: 0 10px;
      height: 100%;
      border: 1px solid #ccc;
      margin-right: 20px;
      border-radius: 8px;
      max-height: 100%;
      overflow-y: auto;
      position: relative;

      .left-title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 15px 10px;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
      }

      .tree-render {
        margin-top: 62px;
      }
    }

    .right {
      width: calc(100% - 320px);
      height: 100%;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 20px;
    }

    ::v-deep .ivu-tree-title {
      width: calc(100% - 15px);
    }
  }

  .right-title {
    text-align: right;
    display: flex;
    justify-content: space-between;

    .btn {
      margin-left: 5px;
    }
  }
</style>